什麼是第三方登入？

第三方登入是一種身份驗證機制，允許用戶使用第三方身份提供者（例如，Google、Facebook、Twitter等）的帳戶登入應用程式網站的會員系統中，而不需要在應用程式網站創建單獨的帳戶。提供了用戶方便性和快速登入的優勢。

為什麼選用第三方登入功能？

在這個專案上，會員系統我想要直接使用 Line 第三方登入功能，而不是自己建置會員系統。主要有下面考量：

1. 考量整體流程，我不需要會員很詳盡的身家資料
2. 使用者體驗：透過第三方服務，使用者不用再另外記得一組新的帳號密碼、也可以輕鬆登入
3. 根據自身不專業統計，在台灣約99%的使用者都有 Line 帳號，會在辦公室團購的應該也不可能不會用 Line 掃描登入 吧(?)
4. 專案練習目的ＸＤ

第三方登入的流程是什麼？

先來看看別人的畫面，就拿一個我每次怎樣都登入不進去、每次都用忘記密碼功能的知名網站舉例。

1. 首先會有個 登入 或 註冊 畫面，讓使用者選擇要用哪個系統登入會員。

   

2. 點選 使用 LINE 登入，跳出 Line 提供的登入畫面 （此時已經連到 LINE 的應用程式服務裡面)

   

   LINE 的好處是還可以選用 QR code 登入

   

3. 經過一些第三方應用程式的身份驗證

   

4. 第三方應用程式提供的資料許可頁面

   

5. 點選許可後，就成功登入啦～
   但因為第三方服務不一定會提供詳盡的會員資料給使用第三方服務的應用程式，所以若有需要，應用程式還是會請使用者再多填寫幾項個人資料

   

上面畫面是使用者可以感受到的基本流程，第三方應用程式身份驗證那塊會依據不同考量有不同設計，但整體流程是差不多的，可以讓使用者輕鬆點選幾個按鍵就達成註冊或登入的身份驗證需求。

前後端分離下，後端在第三方登入功能的工作是什麼？

上面提供一個前後端分離下的第三方登入功能流程範例參考：

1. 使用者(前端) 從專案網站發出第三方登入請求
2. 第三方網站驗證身份後，回傳第三方的驗證Token 給前端
3. 前端把 驗證Token 傳給後端
4. 後端拿著 Token 再次向第三方請求Token驗證
5. 第三方驗證 Token 無誤後，將使用者會員資料回傳給後端，後端可以趁此時將會員資料存入專案網站的 Database
6. 後端傳給前端 專案網站的驗證Token，在專案網站中作為登入依據

這裡面有幾個前提：

• 第三方登入對使用者來說一定要有前端畫面
  我試了幾個 GitHub、Facebook、Line、Google，再給使用者驗證時都是要使用者自己登入，所以需要從第三方提供的畫面讓使用者登入

• 從 A 網站發出請求的，第三方服務會綁定只能將結果回傳 A 網站，藉此避免 CSRF 跨站攻擊

  這裡有個新手常犯錯誤：127.0.0.1 及 localhost 會被視為不同的網站

• 為了避免之後介接多種第三方登入程式，第三方回傳的token資料大不相同，故只以專案網站的驗證 Token 為最終登入依據

Line 第三方登入也有詳細的官方文件說明與教學：